<template>
  <div class="box">
    <div style="width: 95%; height: 100%; margin: 0 auto" class="box-content">
      <!-- 头部 -->
      <div class="box-top" style="display: flex">
        <div style="width: 40%" class="box-top-left">
          <div class="daohang">
            <i style="font-size: 20px; color: #999; line-height: 60px; float: left" class="el-icon-s-home"></i>
            <el-breadcrumb>
              <el-breadcrumb-item style="font-size: 15px; color: #999; line-height: 60px; margin-left: 8px; display: block; float: left">首页 </el-breadcrumb-item>
              <i style="font-size: 15px; line-height: 63px; margin-left: -3px; float: left" class="el-icon-folder-opened"></i>
              <el-breadcrumb-item style="font-size: 15px; line-height: 64px; margin-left: 8px; display: block; float: left">会员管理</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
        </div>
      </div>
      <div class="middle">
        <div class="middle-top" style="display: flex">
          <span style="font-weight: 700; margin-top: 5px">会员名称</span
          ><input v-model="value" style="width: 170px; margin-left: 10px; height: 25px; border: 1px solid #cccccc" placeholder="请输入用户的名称" type="text" />
          <span style="font-weight: 700; margin-left: 30px; margin-top: 5px">注册时间</span>
          <div class="block1" @click="Time1()" style="margin-left: 10px">
            <el-date-picker size="mini" v-model="value1" type="date" @blur="Time()" placeholder="选择日期"> </el-date-picker>
          </div>
          <button @click="search()" style="width: 80px; height: 30px; background: #1890ff; border: none; border-radius: 5px; margin-left: 15px">
            <i style="font-size: 12px; color: white" class="el-icon-search"></i>
            <span style="color: white; margin-left: 10px">查询</span>
          </button>
        </div>
        <Time :faMsg="timeList" v-if="!isTime"></Time>

        <div v-if="isTime">
          <div class="table" v-if="isSe">
            <div v-if="show" style="width: 100%; height: 335px"></div>
            <div class="table-box">
              <table style="border: 1px solid rgba(221, 221, 221, 1)" width="100%" height="100%" border="1" cellspacing="0" align="center">
                <tr style="border: 1px solid rgba(221, 221, 221, 1)">
                  <td style="height: 45px; background: rgba(239, 239, 239, 1); text-align: center; border: 1px solid rgba(221, 221, 221, 1); width: 180px">用户名称</td>
                  <td style="border: 1px solid rgba(221, 221, 221, 1); height: 45px; background: rgba(239, 239, 239, 1); text-align: center; width: 100px">等级/标签组</td>
                  <td style="border: 1px solid rgba(221, 221, 221, 1); height: 45px; background: rgba(239, 239, 239, 1); text-align: center; width: 180px">注册时间</td>
                  <td style="border: 1px solid rgba(221, 221, 221, 1); height: 45px; background: rgba(239, 239, 239, 1); text-align: center; width: 180px">积分/余额</td>
                  <td style="border: 1px solid rgba(221, 221, 221, 1); height: 45px; background: rgba(239, 239, 239, 1); text-align: center">成交</td>
                  <td style="border: 1px solid rgba(221, 221, 221, 1); height: 45px; background: rgba(239, 239, 239, 1); text-align: center">操作</td>
                </tr>
                <tr v-for="item in showList1" :key="item.id" style="position: relative">
                  <td style="height: 55px; border: 1px solid rgba(221, 221, 221, 1)">
                    <img style="width: 40px; height: 40px; position: absolute; top: 10px; left: 10px" src="http://127.0.0.1:7001/public/whjpng/touxiang2.png" />
                    <span style="display: block; text-align: center">{{ item.name }}</span>
                  </td>
                  <td style="border: 1px solid rgba(221, 221, 221, 1)">
                    <span style="display: block; text-align: center">{{ item.grade }}</span>
                  </td>
                  <td style="border: 1px solid rgba(221, 221, 221, 1)">
                    <span style="display: block; text-align: center">{{ item.time }}</span>
                  </td>
                  <td style="border: 1px solid rgba(221, 221, 221, 1)">
                    <span style="display: block; margin-left: 10px">积分:&nbsp;&nbsp;{{ item.deal }}</span
                    ><span style="margin-left: 10px; display: block">余额:&nbsp;&nbsp;{{ item.integral }}</span>
                  </td>
                  <td style="border: 1px solid rgba(221, 221, 221, 1)">
                    <span style="display: block; margin-left: 10px">订单: &nbsp;&nbsp;{{ item.dingdan }}</span
                    ><span style="margin-left: 10px; display: block">金额:&nbsp;&nbsp;&nbsp;{{ item.jine }}</span>
                  </td>
                  <td style="border: 1px solid rgba(221, 221, 221, 1)"><span @click="details(item)" style="display: block; text-align: center; color: rgba(25, 144, 255, 100)">查看详情</span></td>
                </tr>
              </table>

              <div class="table-bottom" v-if="bottom" style="display: flex">
                <div style="width: 30%" class="table-left"></div>
                <div style="width: 70%" class="table-right">
                  <el-pagination
                    style="margin-left: 40%; margin-top: 1%"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage4"
                    :page-sizes="[8, 10, 20, 40]"
                    :page-size="5"
                    :total="showList.length"
                    layout="total, sizes, prev, pager, next, jumper"
                  >
                  </el-pagination>
                </div>
              </div>
            </div>
          </div>
          <div class="table" v-if="isSea">
            <div v-if="show" style="width: 100%; height: 335px"></div>
            <div class="table-box">
              <table style="border: 1px solid rgba(221, 221, 221, 1)" width="100%" height="100%" border="1" cellspacing="0" align="center">
                <tr style="border: 1px solid rgba(221, 221, 221, 1)">
                  <td style="height: 45px; background: rgba(239, 239, 239, 1); text-align: center; border: 1px solid rgba(221, 221, 221, 1); width: 180px">用户名称</td>
                  <td style="border: 1px solid rgba(221, 221, 221, 1); height: 45px; background: rgba(239, 239, 239, 1); text-align: center; width: 100px">等级/标签组</td>
                  <td style="border: 1px solid rgba(221, 221, 221, 1); height: 45px; background: rgba(239, 239, 239, 1); text-align: center; width: 180px">注册时间</td>
                  <td style="border: 1px solid rgba(221, 221, 221, 1); height: 45px; background: rgba(239, 239, 239, 1); text-align: center; width: 180px">积分/余额</td>
                  <td style="border: 1px solid rgba(221, 221, 221, 1); height: 45px; background: rgba(239, 239, 239, 1); text-align: center">成交</td>
                  <td style="border: 1px solid rgba(221, 221, 221, 1); height: 45px; background: rgba(239, 239, 239, 1); text-align: center">操作</td>
                </tr>
                <tr v-for="item in showList2" :key="item.id" style="position: relative">
                  <td style="height: 55px; border: 1px solid rgba(221, 221, 221, 1)">
                    <img style="width: 40px; height: 40px; position: absolute; top: 10px; left: 10px" src="http://127.0.0.1:7001/public/whjpng/touxiang2.png" />
                    <span style="display: block; text-align: center">{{ item.name }}</span>
                  </td>
                  <td style="border: 1px solid rgba(221, 221, 221, 1)">
                    <span style="display: block; text-align: center">{{ item.grade }}</span>
                  </td>
                  <td style="border: 1px solid rgba(221, 221, 221, 1)">
                    <span style="display: block; text-align: center">{{ item.time }}</span>
                  </td>
                  <td style="border: 1px solid rgba(221, 221, 221, 1)">
                    <span style="display: block; margin-left: 10px">积分:&nbsp;&nbsp;{{ item.deal }}</span
                    ><span style="margin-left: 10px; display: block">余额:&nbsp;&nbsp;{{ item.integral }}</span>
                  </td>
                  <td style="border: 1px solid rgba(221, 221, 221, 1)">
                    <span style="display: block; margin-left: 10px">订单: &nbsp;&nbsp;{{ item.dingdan }}</span
                    ><span style="margin-left: 10px; display: block">金额:&nbsp;&nbsp;&nbsp;{{ item.jine }}</span>
                  </td>
                  <td style="border: 1px solid rgba(221, 221, 221, 1)"><span @click="details(item)" style="display: block; text-align: center; color: rgba(25, 144, 255, 100)">查看详情</span></td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Time from './time.vue'
import { getmember, getbiao } from '../../api/index'
export default {
  data() {
    return {
      value1: '',
      showList: [],
      currentPage4: 1,
      show: false,
      showList1: [],
      pageNum: 8, // 每页页数
      size: 1,
      value: '',
      showList2: [],
      isSe: true,
      isSea: false,
      timeList: [],
      isTime: true,
      bottom: true,
      List1: [],
    }
  },
  components: {
    Time,
  },
  methods: {
    List() {
      getbiao().then((res) => {
        this.List1 = res.data
      })
    },

    getList() {
      getmember().then((res) => {
        this.showList = res.data
        this.showList.forEach((item) => {
          let a = parseInt(item.time)
          //  console.log(a)
          // 时间转换
          function timestampToTime(timestamp) {
            var date = new Date(timestamp) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
            var Y = date.getFullYear() + '-'
            var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
            var D = date.getDate() + ' '
            var h = date.getHours() + ':'
            var m = date.getMinutes() + ':'
            var s = date.getSeconds()
            return Y + M + D + h + m + s
          }
          item.time = timestampToTime(a)
          // console.log(item.time)
        })
        this.showList1 = this.showList.slice(0, 8)
      })
    },
    details(item) {
      let data = item.id
      this.$router.push({ path: '/vipList/details/' + data })
    },
    handleSizeChange(val) {
      this.pageNum = val
      this.showList1 = this.showList.slice(0, this.pageNum)
    },
    handleCurrentChange(val) {
      this.size = val
      this.showList1 = this.showList.slice(val * this.pageNum - this.pageNum, val * this.pageNum)
    },
    search() {
      this.showList.forEach((item) => {
        if (this.value == item.name) {
          this.showList2.push(item)
          this.isSe = false
          this.isSea = true
          if (this.showList2.length > 1) {
            this.showList2.shift()
          }
          console.log(this.showList2)
        }
      })
    },
    Time() {
      this.timeList = []
      let a = new Date(this.value1)
      let b = a.getTime()
      this.List1.forEach((item) => {
        if (item.time == b) {
          this.timeList.push(item)
          console.log(this.timeList)
        }
      })
    },
    Time1() {
      this.isTime = !this.isTime
    },
  },
  created() {
    this.getList()
    this.List()
  },
  watch: {
    // 被侦听的变量count
    value() {
      if (this.value == '') {
        this.isSe = true
        this.isSea = false
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 1610px;

  // 头部
  .box-top {
    width: 100%;
    // background:blue;
    // 导航
    .daohang {
      width: 100%;
      height: 50px;
    }
  }
  .middle {
    width: 100%;
    height: 500px;

    .choice {
      width: 100%;
      height: 50px;
      border: 2px solid #f0f0f0;
      .cur {
        background: #ff9800;
        color: #fff;
        width: 100px;
      }
    }
  }
}
.middle {
  width: 100%;
  height: 700px;
  .middle-top {
    width: 100%;
    height: 90px;
  }
  .table {
    width: 1000px;
    height: 600px;
    margin-left: 60px;
  }
}
.table-bottom {
  width: 85%;
  height: 60px;
  // background: red;
  margin-top: 30px;
}
</style>
